<template>
  <el-button-group>
    <el-button :type="isGrid ? 'primary' : 'default'" @click="changeGridHandle(true)" :size="size" icon="el-icon-s-grid"></el-button>
    <el-button :type="!isGrid ? 'primary' : 'default'" @click="changeGridHandle(false)" :size="size" icon="el-icon-s-unfold"></el-button>
  </el-button-group>
</template>

<script>
import { setDomainValue, getDomainValue } from './local-storage-util'
export default {
  computed: {
  },
  data() {
    return {
      isGrid: Boolean
    }
  },
  component: [
    setDomainValue,
    getDomainValue
  ],
  props: {
    /**
     * 存储在 local storage 里面的域
     */
    domain: String,
    default: Boolean,
    size: {
      type: String,
      default: ''
    }
  },
  methods: {
    changeGridHandle(isGrid) {
      this.isGrid = isGrid;
      let config = {isGrid: this.isGrid}
      setDomainValue(this.domain, config)
      this.$emit('update:isGrid', isGrid)
    }
  },
  mounted() {
    if (this.domain == undefined) {
      alert("The domain parameter is not set")
      return
    }
    if (this.default == undefined) {
      this.default = true
    }
    var rootNode = this.$store.getters['pageSettings'];
    let config = getDomainValue(rootNode, this.domain, {isGrid: this.default});
    this.isGrid = config.isGrid
    this.$emit('update:isGrid', this.isGrid);
  }
}
</script>

<style lang="scss" scoped>

</style>
